<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
	<title>易买网 - 首页</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="scripts/function.js"></script>
</head>
<body>
<%@include file="nav.jsp"%>
<div id="position" class="wrap">
	您现在的位置：<a href="productSelectByPage">易买网</a> &gt; 购物车
</div>
<div class="wrap">
	<div id="shopping">
		<form action="balance" method="get">
			<table>
				<tr>
					<th width="384">商品名称</th>
					<th width="136">商品价格</th>
					<th width="136">商品总价</th>
					<th width="161">购买数量</th>
					<th width="59">操作</th>
				</tr>
				<c:forEach var="product" items="${list}" varStatus="status">
					<tr id="${product.ep_id}">
						<td class="thumb"><img src="data:image/jpeg;base64,${images[status.index]}" />
							<a href="product-view.html">${product.ep_name}</a></td>
						<td class="price" id="price_id_${product.ep_id}">
							<span>￥${product.ep_price}</span>
							<input type="hidden" value="${product.ep_price}" />
						</td>
						<td class="price" id="pr_${product.ep_id}">
							<span >￥${product.ep_price*product.count}</span>
							<input type="hidden" value="${product.ep_price*product.count}" />
						</td>
						<td class="number">
							<div>
								<input  type="button"  onclick="doAdd(-1,${product.ep_id})" value="&nbsp-&nbsp" />
								<input id="inputnum_${product.ep_id}"  size="2" value="${product.count}" disabled="disabled" />
								<input  type="button"  onclick="doAdd(1,${product.ep_id})" value="&nbsp+&nbsp" />
							</div>
						</td>
						<td class="delete">
							<a href="shopcarDelete?ep_id=${product.ep_id}">删除</a>
						</td>
					</tr>
				</c:forEach>
			</table>
			<div class="button"><input type="submit" value="" /></div>
		</form>
	</div>
	<script type="text/javascript">
	</script>
</div>
<div id="footer">
	Copyright &copy; 2022 卓京教育 All Rights Reserved. 湘ICP证1001号
</div>
</body>
</html>
<script type="text/javascript">
	var ajaxRequest;
	var numid ;
	function doAdd(num,id){//num +1  -1  == id  商品的编号
		//保存商品的id
		numid = id;
		//第一步：初始化一个ajax的XMLHttpRequest对象
		if(window.XMLHttpRequest){
			ajaxRequest = new XMLHttpRequest();
		}else{
			var names=["msxml","msxml2","msxml3","Microsoft"];
			for(vari=0;i<names.length;i++){
				try{
					var name=names[i]+".XMLHTTP";
					ajaxRequest = new ActiveXObject(name);
				}catch(e){
					throw 'get request error';
				}
			}
		}
		if(ajaxRequest!=null){
			//第2步:让ajax做什么事
			ajaxRequest.open("post","updateShopCar?id=" + encodeURI(encodeURI(id))+"&num="+encodeURI(encodeURI(num)),true);
			ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			ajaxRequest.send(null);
			//第3步:准备ajax回调函数
			ajaxRequest.onreadystatechange =back;
		}

	}
	function back(){
		if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
			//分割得到的文本内容
			var strs = ajaxRequest.responseText.split("-");
			//给商品数量重新赋值
			document.getElementById("inputnum_"+numid).value=strs[0];
			//给商品总价重新赋值
			document.getElementById("pr_"+numid).innerHTML="￥"+strs[1];
		}
	}
</script>